<!-- createBrokerageConfig.vue -->
<template>
  <el-dialog
    :title="editData.id ? '编辑返佣配置' : '新增返佣配置'"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    width="500px"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      v-loading="loading"
    >
      <el-form-item label="推广用户" prop="userId">
        <el-input v-model="form.userPhone" placeholder="请输入推广用户手机号"></el-input>
      </el-form-item>
      <el-form-item label="采购商" prop="merchantId">
        <!-- <el-input v-model="form.merchantUserId" placeholder="请输入采购商ID"></el-input> -->
        <merchant-name @getMerId="getMerId" :categoryId="4"></merchant-name>
      </el-form-item>
      <el-form-item label="一级返佣比例" prop="firstRatio">
        <el-input-number 
          v-model="form.firstRatio"
          :min="0"
          :max="100"
          :precision="0"
        ></el-input-number>
        <span class="unit">%</span>
      </el-form-item>
      <el-form-item label="二级返佣比例" prop="secondRatio">
        <el-input-number
          v-model="form.secondRatio" 
          :min="0"
          :max="100"
          :precision="0"
        ></el-input-number>
        <span class="unit">%</span>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import merchantName from '@/components/merchantName'
import { brokerageConfigSaveApi, brokerageConfigUpdateApi } from '@/api/distribution'

export default {
  name: 'CreateBrokerageConfig',
  props: {
    editData: {
      type: Object,
      default: () => ({})
    }
  },
  components: { merchantName },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      form: {
        userPhone: '',
        merchantId: '',
        firstRatio: 0,
        secondRatio: 0
      },
      rules: {
        userPhone: [
          { required: true, message: '请输入推广用户ID', trigger: 'blur' }
        ],
        merchantId: [
          { required: true, message: '请选择采购商', trigger: 'blur' }
        ],
        firstRatio: [
          { required: true, message: '请输入一级返佣比例', trigger: 'blur' }
        ],
        secondRatio: [
          { required: true, message: '请输入二级返佣比例', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    editData: {
      handler(val) {
        console.log('编辑: ', val)
        if(val.id) {
          this.form = {...val}
        } else {
          this.form = {
            userId: '',
            merchantId: '',
            firstRatio: 0,
            secondRatio: 0
          }
        }
      },
      deep: true
    }
  },
  methods: {
    handleClose() {
      this.$refs.form.resetFields()
      this.dialogVisible = false
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if(valid) {
          this.loading = true
          
          // 构建提交数据
          const submitData = {
            userPhone: this.form.userPhone,
            merchantId: this.form.merchantId,
            firstRatio: Number(this.form.firstRatio),
            secondRatio: Number(this.form.secondRatio)
          }

          // 如果是编辑,需要带上ID
          if(this.editData.id) {
            submitData.id = this.editData.id
          }

          // 根据是否有ID判断是新增还是编辑
          const apiMethod = this.editData.id ? brokerageConfigUpdateApi : brokerageConfigSaveApi
          
          apiMethod(submitData)
            .then(() => {
              this.$message.success('操作成功')
              this.handleClose()
              this.$emit('getList')
            })
            .catch(() => {
              this.loading = false
            })
            .finally(() => {
              this.loading = false  
            })
        }
      })
    },
    getMerId(id) {
      this.form.merchantId = id
    },
  }
}
</script>

<style scoped>
.unit {
  margin-left: 10px;
}
</style>